<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>

                    <a-col :span="24">
                        <a-form-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date :show-time="true" placeholder="请选择入库时间" date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['rukushijan']" :trigger-change="true" style="width: 100%" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <template #label>
                                <span style="color: red; margin-left: 4px;">*</span>
                                <span>司机姓名</span>
                            </template>
                            <a-input v-decorator="['sijixingming', validatorRules.sijixingming]"
                                placeholder="请输入司机姓名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <template #label>
                                <span style="color: red; margin-left: 4px;">*</span>
                                <span>车牌号</span>
                            </template>
                            <a-input v-decorator="['chepaihao', validatorRules.chepaihao]"
                                placeholder="请输入车牌号"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <template #label>
                                <span style="color: red; margin-left: 4px;">*</span>
                                <span>公司名称</span>
                            </template>
                            <a-input v-decorator="['gongsimingcheng', validatorRules.gongsimingcheng]"
                                placeholder="请输入车牌号"></a-input>

                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="行驶证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload disabled isMultiple
                                v-decorator="['license', validatorRules.license]"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="行驶证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload disabled isMultiple v-decorator="['driverLicense']"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload disabled isMultiple v-decorator="['idCardNoImg']"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="司机签字" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload disabled isMultiple v-decorator="['driverSign']"></j-image-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="保安签字" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload disabled isMultiple v-decorator="['sign']"></j-image-upload>
                        </a-form-item>
                    </a-col>

                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="入库申请详情" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="yzdRukushenqingguanliZiTable.loading"
                    :columns="yzdRukushenqingguanliZiTable.columns" @valueChange="valueChange"
                    :dataSource="yzdRukushenqingguanliZiTable.dataSource" :maxHeight="300" :disabled="formDisabled"
                    :rowNumber="true" :rowSelection="true" :actionButton="true">
                </j-editable-table>
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton" style="text-align: center;width: 100%;margin-top: 16px;"><a-button
                @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
    name: 'YzdShenqingguanliForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
        return {
            RenyuanList: [],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            validatorRules: {
                sijixingming: {
                    rules: [{ validator: this.validatePass }]
                },
                goumaichangjia: {
                    rules: [
                        { required: true, message: '请输入购买厂家!' },
                    ]
                },
                chepaihao: {
                    rules: [{ validator: this.validatePass }]
                },
                gongsimingcheng: {
                    rules: [{ validator: this.validatePass }]
                },
                gonganwenjian: {
                    rules: [
                        { required: true, message: '请输入公安文件!' },
                    ]
                },

                rukushijan: {
                    rules: [
                        { required: true, message: '请输入入库时间!' },
                    ]
                },
                rukurenxingming: {
                    rules: [
                        { required: true, message: '请输入入库人姓名!' },
                    ]
                },

                rukupingshu: {
                    rules: [
                        { required: true, message: '请输入入库瓶数!' },
                    ]
                },

                cangkuweizhi: {
                    rules: [
                        { required: true, message: '请输入仓库位置!' }
                    ]
                },
              
            },
            refKeys: ['yzdRukushenqingguanliZi',],
            tableKeys: ['yzdRukushenqingguanliZi',],
            activeKey: 'yzdRukushenqingguanliZi',
            // 入库申请管理_子
            yzdRukushenqingguanliZiTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: '货物名称',
                        key: 'huaxuepinmingcheng',
                        type: FormTypes.select,
                        dictCode: "yzd_weixianfeiwuxinxi,huaxuepinmingcheng,huaxuepinmingcheng",
                        width: "160px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                    {
                        title: '入库数量',
                        key: 'rukuzhongliang',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                    {
                        title: '单位',
                        key: 'danwei',
                        type: FormTypes.select,
                        dictCode: 'danwei',
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                    {
                        title: '物料类别',
                        key: 'wuliaoleibie',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                    {
                        title: '物料编码',
                        key: 'wuliaobianma',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },

                ]
            },
            url: {
                huojihao: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/findhuojiahao",
                cangkumingcheng: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/huoQuCangKu",
                xialakuang: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/list",
                add: "/yzd_rukuguanli/yzdShenqingguanli/saveAll",
                edit: "/yzd_rukuguanli/yzdShenqingguanli/edit",
                queryById: "/yzd_rukuguanli/yzdShenqingguanli/queryById",
                yzdRukushenqingguanliZi: {
                    list: '/yzd_rukuguanli/yzdShenqingguanli/queryYzdRukushenqingguanliZiByMainId'
                },
                renyuanurl: "/YzbKehuxinxi/yzbKehuxinxi/listName",
                getByName: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/getByName"
            },

            select: [],
            cangkuminghceng: [],
            pingshu: '',
            danwei: [],
            huojiahaolist: [],
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
        this.huojiahaolist = []
        this.getrenyuan();
    },
    methods: {
        getrenyuan() {
            getAction(this.url.renyuanurl).then(res => {
                this.RenyuanList = res.result;
            })
        },
        valueChange(event) {
            if (event.column.key === "huaxuepinmingcheng") {
                getAction(this.url.getByName + "?huaxuepinmingcheng=" + event.value).then((res) => {
                    if (res.success) {
                        let a = res.result
                        this.$refs.yzdRukushenqingguanliZi.setValues([{
                            'rowKey': event.row.id, values: {
                                'danwei': a.danwei,
                                'wuliaoleibie': a.huaxuepinleibie
                            }
                        }]);
                    }
                })
            }
        },
        huoqupingshu(arr) {
            this.pingshu = arr
        },
        validatePass(rule, value, callback) {
      let values = this.form.getFieldsValue()

      if (!values.sijixingming && !values.chepaihao && !values.gongsimingcheng) {
        callback(new Error('姓名，车牌号，公司名称请至少输入一项！'))
      }
      callback()
    },
        addBefore() {
            this.form.resetFields()
            this.yzdRukushenqingguanliZiTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            let fieldval = pick(this.model, 'gongsimingcheng', 'sign', 'driverSign', 'idCardNoImg', 'license', 'driverLicense', 'gonganwenjian', 'rukuzhaungtai', 'huaxuepinleibie', 'huaxuepinmingcheng', 'cashao', 'rukushijan', 'rukurenxingming', 'rukurenbumen', 'rukuliang', 'huipizhongliang', 'rukupingshu', 'cangkumingcheng', 'goumaishijian', 'goumaichangjia', 'sijixingming', 'chepaihao', 'jinrucangkupaizhao', 'dakaiguimenpaizhao', 'bohuiyuanyin', 'cangkuweizhi', 'zhongliang')
            this.huaxuepinleibie = fieldval.huaxuepinleibie
            this.cashao = fieldval.cashao
            this.handleChange1(fieldval.cangkumingcheng);
            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }
                this.requestSubTableData(this.url.yzdRukushenqingguanliZi.list, params, this.yzdRukushenqingguanliZiTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            // allValues.formValue.huaxuepinmingcheng=allValues.formValue.huaxuepinmingcheng.toString()
            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                yzdRukushenqingguanliZiList: allValues.tablesValue[0].values,
            }
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'gongsimingcheng', 'sign', 'driverSign', 'idCardNoImg', 'license', 'driverLicense', 'gonganwenjian', 'rukuzhaungtai', 'huaxuepinleibie', 'huaxuepinmingcheng', 'cashao', 'rukushijan', 'rukurenxingming', 'rukurenbumen', 'rukuliang', 'huipizhongliang', 'rukupingshu', 'cangkumingcheng', 'goumaishijian', 'goumaichangjia', 'sijixingming', 'chepaihao', 'jinrucangkupaizhao', 'dakaiguimenpaizhao', 'bohuiyuanyin', 'cangkuweizhi', 'zhongliang'))
        },
        handleChange(value) {
            // this.huaxuepinmingcheng
        },
        handleChange1(aa) {
            this.huojiahaolist = [];
            var re = {
                "cangkumingcheng": aa
            }
            getAction(this.url.huojihao, re).then((res) => {
                res.result.forEach(element => {
                    this.huojiahaolist.push(element.huojiahao)
                })
            })
        },
        getModalAsContainer(node) {
            return document.querySelector('.j-modal-box .ant-modal-content')
        }
    }
}
</script>

<style scoped></style>
